<template >
    <div>
        <h1>登录页</h1>
        <h2>vue-router</h2>
        <router-link  :to="{path:'/user/on',query:{value:'123'}}">动态路由</router-link>
        <h2>vuex</h2>
        <button @click='add'>增加</button>
        <button @click='reduce'>减少</button>
        <button @click='actionsAdd'>异步增加</button>
        <button @click='actionsReduce'>异步减少</button>
        <span>{{$store.getters.VAL}}</span>
        <button @click='onEdit'>修改模块user</button>
        <button @click='onActionsEdit'>异步修改模块user</button>
        <span>{{$store.getters.USER_NAME}}</span>
    </div>
</template >

<script >
    export default {
        name: 'login',
        data() {
            return {

            }
        },
        computed: {

        },
        created() {

        },
        methods: {
            add() {
                this.$store.commit('addVal')
            },
            reduce() {
                this.$store.commit('reduceVal')
            },
            actionsAdd() {
                this.$store.dispatch('addVal')
            },
            actionsReduce() {
                this.$store.dispatch('reduceVal')
            },
            onEdit() {
                this.$store.commit('ON_USER_NAME','李四')
            },
            onActionsEdit() {
                this.$store.dispatch('ON_USER_NAME','王五')
            }
        }
    }
</script >

<style scoped >

</style >